<template>
	<view>
		<view class=" u-skeleton">
			<u-navbar background='transparent' title-color='#fff' :border-bottom='false' title="共享球室" immersive
				:is-back='false'>
				<template slot='left'>
					<div class="u-flex">
						<image src="/static/logo_add.png" style="width: 54rpx;height: 54rpx;margin-left: 20rpx;"></image>
						<div @click="getLocation" style="margin-left: 20rpx;color: #fff;font-size: 32rpx;">
						   <u-icon name="map" color="#fff" size="32"></u-icon>
						  <span class="u-margin-left-10">{{userAddress?userAddress.city:"我要定位"}}</span> 
						</div>
					</div>
					
				</template>
			</u-navbar>
			<view
				style="width: 750rpx;height: 480rpx;background-repeat: no-repeat;display: inline-block;background-size: cover;"
				:style="{backgroundImage:'url('+$ftpUrl('/home_top.png')+')'}">
				<view class="u-flex u-row-between u-skeleton-fillet"
					style="margin:200rpx auto ;background: #fff;width: 700rpx;border-radius: 20rpx;padding: 30rpx;">
					<view class="u-flex u-skeleton-fillet">
						<image src="/static/logo_add.png" style="width: 96rpx;height: 96rpx;"></image>
						<view class="u-margin-left-20">
							<view>消息通知</view>
							<view class="u-type-info u-font-22">关注公众号，消息提醒更即时~</view>
						</view>
					</view>
					<view class="u-skeleton-fillet">
						<image @click="$LookImage(['/static/logo_add.png'])" src="/static/logo_add.png"
							style="width: 96rpx;height: 96rpx;"></image>
					</view>
				</view>
			</view>
			<view style="margin: auto;width: 700rpx;position: relative;bottom: 80rpx;">
				<u-swiper :list="banner" height="360" name='cover' class='u-skeleton-fillet'></u-swiper>
				<view class="u-flex u-margin-top-20 u-skeleton-fillet">
					<u-notice-bar :list="noticeList" :volume-icon='false' type='none'>
						<view slot='left'>
							<image src="/static/notice.png" style="width: 120rpx;height: 48rpx;"></image>
						</view>
					</u-notice-bar>
				</view>


				<view class="u-flex u-row-between">
					<view class="">
						<view>
							
							<image  @click="often" src="/static/indexClassOne.png" style="width:354rpx;height: 390rpx;"></image>
						</view>
						<!-- <view @click="often" class="u-skeleton-fillet"
							:style="{backgroundImage:'../static/indexClassOne.png'}"
							style="background-repeat: no-repeat;background-size: covercolor: #fff;padding: 40rpx 0;">
							<view style="margin-left:150rpx;">
								<view>我要开台</view>
								<view class="u-font-22">约朋友一起打球吧</view>
							</view>
						</view> -->
						<!-- <view @click="$Go('/pages/store/index?isCharge=1')" class="u-skeleton-fillet"
							:style="{backgroundImage:'url('+$ftpUrl('/class_2.png')+')'}"
							style="background-repeat: no-repeat;background-size: cover;width:336rpx;height: 156rpx ;color: #fff;margin-top: 20rpx;padding: 40rpx 0;">
							<view style="margin-left:150rpx;">
								<view>余额充值</view>
								<view class="u-font-22">充值优惠享不停</view>
							</view>
						</view> -->
					</view>
					
					<view class="">
						<view  @click="$Go('/pages/index/identification')"  class="u-skeleton-fillet"
							:style="{backgroundImage:'url('+$ftpUrl('/class_1.png')+')'}"
							style="background-repeat: no-repeat;background-size: cover;width:336rpx;height: 156rpx;color: #fff;padding: 40rpx 0;">
							<view style="margin-left:150rpx;">
								<view>我要开店</view>
								<view class="u-font-22">快速加入</view>
							</view>
						</view>
						<view @click="$Go('/pages/store/index?isCharge=2')" class="u-skeleton-fillet"
							:style="{backgroundImage:'url('+$ftpUrl('/class_2.png')+')'}"
							style="background-repeat: no-repeat;background-size: cover;width:336rpx;height: 156rpx ;color: #fff;margin-top: 20rpx;padding: 40rpx 0;">
							<view style="margin-left:150rpx;">
								<view>购买会员卡</view>
								<view class="u-font-22">更省，更优惠</view>
							</view>
						</view>
					</view>
					<!-- <view @click="$Go('/pages/index/identification')" class="u-skeleton-fillet"
						:style="{backgroundImage:'url('+$ftpUrl('/class_3.png')+')'}"
						style="background-repeat: no-repeat;background-size: cover;width:336rpx;height: 328rpx ;margin-left: 20rpx;">
						<view style="margin-left:150rpx;margin-top: 40rpx;color: #fff;">
							<view>我要开店</view>
							<view class="u-font-22">快速加入</view>
						</view>
					</view> -->
				</view>

				<view class="u-skeleton-fillet" @click="$Go('/pages/store/index')"
					style="background-size: cover; width: 700rpx;height: 200rpx;margin: 20rpx auto;"
					:style="{backgroundImage:'url('+$ftpUrl('/adv.png')+')'}">

				</view>
				
				
				


				<view class="u-skeleton-fillet" @click="$Go('/pages/store/index')" style="width: 700rpx;
										background: linear-gradient(180deg,#4f8bff 100%, #745eff 100%);
										border-radius: 58rpx;
box-shadow: 0px 6px 12px 0px rgba(2,88,255,0.28);
text-align: center;color: #fff;padding: 30rpx;">
					选择店铺开台
				</view>
			</view>
		</view>

		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		
		<view style="position: fixed;bottom: 200rpx;display: flex;justify-content: space-between;">
			<view class="u-flex fixBlockLeft" style="position: fixed;left: 0;" >
				<view class="u-margin-right-10">客服</view>
				<image src="../../static/kefu.png" style="width: 48rpx;height: 48rpx;"></image>
				<button open-type="contact" class="custom-btn"></button>
			</view>
			<view  class="u-flex fixBlockRight"  style="position: fixed;right: 0;" >
				<view class="u-margin-right-10">分享</view>
				<image src="../../static/share.png" style="width: 48rpx;height: 48rpx;"></image>
				<button open-type="share" class="custom-btn"></button>
			</view>
			
		</view>
		
		
		<u-modal v-model="showTags" title="常顾门店"  confirm-text="全部门店" @confirm="$Go('/pages/store/index')" show-cancel-button>
			<view class="slot-content" style="margin-bottom: 20rpx;padding-right: 20rpx;">
				<view v-for="(item,index) in oftenList" :key="index" class="u-flex u-row-between u-margin-top-20"   @click="$Go('/pages/store/detail?id='+item.id)">
					<view>{{item.storeName}}
					<text class="u-font-22">({{item.address}})</text>
					</view>
					<view>
						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-modal>
		  
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wxLocation from '@/common/location.js';
	export default {
		computed:{
			...mapState(['userAddress']),
		},
		
		data() {
			return {
				oftenList:[],
				showTags:false,
				loading: true, // 是否显示骨架屏组件
				banner: [],
				noticeList: []
			}
		},
		onLoad() {
			
			 
			Promise.all([this.getBanner(), this.getNotice()]).then((result) => {

				this.loading = false

			}).catch((error) => {

			})
		},
		methods: {
			getLocation(){
				const wx=new wxLocation();
				wx.getAddress().then(res=>{
					
				}).catch(err=>{
				
				})
			},
			often(){
				
				this.$u.post('/index/oftenStore').then(res => {
					if(res.length){
						this.oftenList=res.slice(0,3);
						this.showTags=true
					}else{
						uni.navigateTo({
							url:"/pages/store/index"
						})
					}
				})
			},
			getBanner() {
				return new Promise((resolve, reject) => {
					this.$u.post('/index/banner').then(res => {
						this.banner = res;

						resolve(res)
					})
				})
			},
			getNotice() {
				return new Promise((resolve, reject) => {
					this.$u.post('/index/notice').then(res => {
						let arr = []
						res.forEach(item => {
							arr.push(item.title)
						})
						this.noticeList = arr;

						resolve(res)
					})
				})

			}
		}
	}
</script>

<style>
 .fixBlockLeft{
	 background: #ffffff;
	 border-radius: 0px 41rpx 41rpx 0px;
	 box-shadow: 0px 2rpx 8rpx 0px rgba(197,197,197,0.30); 
	 text-align: center;
	 padding: 17rpx;
	 display: inline-flex;
	 font-size: 22rpx;
 }
 
 .fixBlockRight{

	background: #ffffff;
	 box-shadow: 0px 2rpx 8rpx 0px rgba(197,197,197,0.30); 
	 border-radius: 41rpx 0 0 41rpx;
	 display: inline-flex;
	 padding: 17rpx;
	 text-align: center;
	 font-size: 22rpx;
 }
 
 
 .slot-content {
 		font-size: 28rpx;
 		color: $u-content-color;
 		padding-left: 30rpx;
 	}
</style>
